import React, {Component} from 'react';
import {CSSTransition} from 'react-transition-group';
import {connect} from 'react-redux';
import {actionCreators}   from './store/index';
import {actionCreators as loginActionCreators}   from '../../pages/login/store/index';
import {
    HeaderWrapper,
    Logo,
    Nav,
    NavItem,
    NavSearch,
    Addition,
    Button,
    SearchWrapper,
    SearchInfo,
    SearchInfoTitle,
    SearchInfoSwitch,
    SearchInfoItem,
    SearchInfoList,
} from './style';
import { Link } from 'react-router-dom';



class Header extends Component {

    render() {
        const {focused,handleInputFocus,handleInputBlur,list, login, logoOut} = this.props;
        return (
            <HeaderWrapper>
                <Link to='/'>
                    <Logo/>
                </Link>
                <Nav>
                    <NavItem className="left active">首页</NavItem>
                    <NavItem className="left">下载APP</NavItem>
                    {
                        login ? <NavItem className="right" onClick={logoOut}>退出</NavItem> :<Link to='/login'><NavItem className="right">登录</NavItem></Link>
                    }
                    <NavItem className="right">
                        <i className="iconfont">&#xe636;</i>
                    </NavItem>
                    <SearchWrapper>
                        <CSSTransition
                            in={focused}
                            timeout={200}
                            classNames="slide"
                        >
                            <NavSearch
                                className= {focused?'focused':''}
                                onFocus={() => handleInputFocus(list)}
                                onBlur={handleInputBlur}
                            ></NavSearch>
                        </CSSTransition>
                        <i 
                            className={focused?'focused iconfont zoom':'iconfont zoom'}
                        >&#xe614;</i>
                        {this.getListArea()}
                    </SearchWrapper>
                </Nav>
                <Addition>
                    <Button className="writing">
                        <i className="iconfont">&#xe615;</i>
                        写文章
                    </Button>
                    <Button className="reg">注册</Button>
                </Addition>
            </HeaderWrapper>
        )
    }

    
    getListArea=() => {
        const {focused,mouseIn,list, page,totalPage} = this.props;
        const jsList = list.toJS();
        const pageList = [];
        if(jsList.length) {
            for(let i = (page-1) * 10; i< page* 10; i++){
                pageList.push(
                    <SearchInfoItem key={jsList[i]}>{jsList[i]}</SearchInfoItem>
                );
            }
        }

        if(focused || mouseIn){
            return (
                    <SearchInfo onMouseEnter={this.props.handleMouseEnter} onMouseLeave={this.props.handleMouseLeave}>
                        <SearchInfoTitle>
                            热门搜索
                            <SearchInfoSwitch onClick={() => this.props.handleChangePage(page, totalPage, this.spinIcon)}>
                                <i ref={(icon) => {this.spinIcon = icon}} className="iconfont spin">&#xe851;</i>
                                换一批
                            </SearchInfoSwitch>
                        </SearchInfoTitle>
                        <SearchInfoList>
                            {
                                pageList
                                // list.map((item)=>{
                                // return <SearchInfoItem key={item}>{item}</SearchInfoItem>
                                // })
                            }
                        </SearchInfoList>
                    </SearchInfo>
            )
        }else {
            return null;
        }
    }

}


const mapStateToProps = (state) => {
    return {
        // focused: state.header.focused,
        // focused: state.header.get('focused'), //因为生成了immutable对象,所以要这样取

        focused: state.get('header').get('focused'),// 统一为immutable对象
        list: state.get('header').get('list'),
        page: state.get('header').get('page'),
        totalPage: state.get('header').get('totalPage'),
        mouseIn: state.get('header').get('mouseIn'),
        login: state.get('login').get('login'),
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        handleInputFocus(list) {
            console.log(list)
            if(list.size === 0) {
                dispatch(actionCreators.getList())
            }
            dispatch(actionCreators.searchFocus());
            // const action = {
            //     type: 'search_focus'
            // };
        },
        handleInputBlur() {
            // const action = {
            //     type: 'search_blur'
            // };
            dispatch(actionCreators.searchBlur());
        },
        handleMouseEnter() {
            dispatch(actionCreators.mouseEnter());
        },
        handleMouseLeave() {
            dispatch(actionCreators.mouseLeave());
        },
        handleChangePage(page, totalPage, spin) {
            // spin.style.transform = 'rotate(300deg)';
            let originAngle = spin.style.transform.replace(/[^0-9]/ig, '')
            if(originAngle) {
                originAngle = parseInt(originAngle, 10);
            }else {
                originAngle = 0;
            }
            spin.style.transform = `rotate(${originAngle+360}deg)`
            // console.log(originAngle)
            // console.log(spin) //获取refdom
            if(page < totalPage) {
                dispatch(actionCreators.changePage(page + 1));
            }else {
                dispatch(actionCreators.changePage(1));
            }
        },
        logoOut() {
            dispatch(loginActionCreators.logoOut());
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Header);